<script lang="ts" setup>
import useMainModal from '@/utils/useMainModal'

defineProps({
    title: {
        type: String,
        default: '库区：'
    },
})

const { changeMainModal,getMainModal } = useMainModal()
const modal = getMainModal()

</script>

<template>
    <div v-show="modal" class="full-w full-h modal row-normal" @click.stop="changeMainModal()" :class="[modal&&'popup-active']">
        <div class="modal_content shadow-normal-1 column-normal full-w" @click.stop="()=>{}">
            <div class="full-w row-normal flex-shrink-0">
                <span class="font-size-12 full-w-0 p-a-5 p-l-10 title-backgroud row-normal-space-between-wrap">
                    <span class="flex-grow-1">{{ title }}</span>
                    <span class="p-r-10 cursor-pointer" @click.stop="changeMainModal()">关闭</span>
                </span>
            </div>
            <div class="flex-grow-1"></div>
            <div class="flex-shrink-0 bottom-area full-w">
                <div class="m-a-10 row-normal-end font-size-10">
                    <span class="row-normal">
                        <span class="left-cell-title-color">数量合计：</span>
                        <span>0</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
@import url('@/css/sepTitle.styl');

.modal
    position absolute
    top 0
    left 0
    background-color rgba(0,0,0,.1)

.modal_content
    width 400px
    height 200px
    background-color rgb(11,15,35)
    border-radius 3px
    overflow hidden

$bottomAreaTopPadding = 5px
.bottom-area
    // padding 10px 10px
    background-image linear-gradient(rgb(20,38,83) 0%,rgb(20,38,83) 100%);
    background-repeat no-repeat;
    width  100%
    background-size calc(100% - 10px) 1px;
    background-position $bottomAreaTopPadding 0;

/* 应用动画 */
.popup-active{
  animation: slideDown 0.3s ease-out;
}

/* 弹窗动画 */
@keyframes slideDown {
  from {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
  }
  to {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

</style>